<template>
  <div>
    <div class="app-container">
      <Card style="margin-bottom:10px">
        <p slot="title" style="text-align:center;font-weight:800;font-size:18px">家庭详情</p>
        <div class="head-box">
          <div class="box-item">户主：{{ dataBus.householderName }}</div>
          <div class="box-item">户号：{{ dataBus.householdCode }}</div>
          <div class="box-item">村民委员会：{{dataBus.villageName}}</div>
        </div>
        <div class="head-box">
          <div class="box-item">身份证号：{{ dataBus.idCardNo }}</div>
          <div class="box-item">户主电话：{{dataBus.householderMobile}}</div>
          <div class="box-item">家庭人口：{{ dataBus.householdSize }}</div>
        </div>
        <div class="head-box">
          <div class="box-item">家庭积分：{{ dataBus.householdPoints }}</div>
          <div class="box-item">家庭状态：<Tag>{{ dataBus.auditText }}</Tag></div>
          <div class="box-item">
            申请时间：{{ this.$date(dataBus.postTime,'yyyy-MM-dd') }}
          </div>
        </div>
        <div class="head-box">
          <div>家庭住址：{{ dataBus.provinceName }}/{{dataBus.city_name}}/{{dataBus.countyName}}/{{dataBus.townshipName}}/{{dataBus.villageName}}/{{dataBus.subDistrictName}}/{{dataBus.houseAddress}}</div>
        </div>
      </Card>
      <Table border :columns="columnsSub" :data="dataGrid"></Table>
      <Button v-if="dataBus.householdStatus === 0" style="margin: 10px auto;display:block" type="primary" @click="Submit">审核通过</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Detail",
  data() {
    return {
      dataGrid: [],
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal: {}
      },
      columnsSub: [
        {
          title: "成员姓名",
          key: "userName",
        },
        {
          title: "手机号",
          key: "userMobile",
        },
        {
          title: "性别",
          key: "userSexText",
          width: 120,
        },
        {
          title: "家庭关系",
          key: "householdRoleText",
          width: 120
        },
        {
          title: "村民编号",
          key: "unionCertNo",
          width: 210
        },
        {
          title: '村民积分',
          key: "villagerPoints",
          width: 120
        },
      ]
    }
  },
  props: {
    dataBus: Object,
    callbank: Function
  },
  methods: {
    init(id) {
      this.query.equal.householdId = id;
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/villager/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list
            data.forEach(element => {
              element.householdRoleText = this.$enum.householdRole(element.householdRole)
            });
            this.dataGrid = data
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`
            })
          }
        },
      }).get()
    },
    Submit() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/household-src/household/audit",
        data: {
          pojo: {
            householdId: this.dataBus.householdId,
            countyCode: this.dataBus.countyCode,
            householdStatus: 1
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '审核成功',
              duration: 1,
              onClose: ()=> {
                this.callbank()
              }
            })
          } else {
            this.$Notice.warning({
              desc: `失败原因：${res.data.msg}`,
            })
          }
        },
      }).post()
    }
  },
};
</script>
<style lang="less" scoped>
.head-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 30px;
}
.box-item {
  width: 30%;
  display: flex;
  align-items: flex-start;
}
</style>